<template>
	<view class="con">
		<view class="top">
			<view :class="['top_nr', type == 1 ? 'top_nr_xz' : '']" @click="typeclick(1)">
				<view class="top_btn_nr_title">提现到银行卡</view>
				<view class="top_nr_zw"></view>
			</view>
			<view :class="['top_nr', type == 2 ? 'top_nr_xz' : '']" @click="typeclick(2)">
				<view class="top_btn_nr_title">提现至指定平台</view>
				<view class="top_nr_zw"></view>
			</view>
		</view>

		<view class="list" v-if="type == 1">
			<view class="list_nr">
				<view class="list_nr_left">真实姓名</view>
				<input class="list_nr_right" type="text" placeholder="输入真实姓名" v-model="name" />
			</view>
			<view class="list_nr">
				<view class="list_nr_left">银行名称</view>
				<input class="list_nr_right" type="text" placeholder="输入开户银行名称" v-model="yinhang" />
			</view>
			<view class="list_nr">
				<view class="list_nr_left">银行卡号</view>
				<input class="list_nr_right" type="text" placeholder="输入开户银行卡号" v-model="zhanghao" />
			</view>
		</view>
		<view class="list" v-if="type == 2">
			<view class="list_nr">
				<view class="list_nr_left">真实姓名</view>
				<input class="list_nr_right" type="text" placeholder="输入真实姓名" v-model="name" />
			</view>
			<view class="list_nr">
				<view class="list_nr_left">选择平台</view>
				<view class="list_nr_right">
					<view class="list_nr_right_box">
						<view class="list_nr_right_box_nr" @click="pingtai = 1">
							<image class="list_nr_right_box_nr_img" src="/static/86.png" mode="" v-if="pingtai == 1"></image>
							<image class="list_nr_right_box_nr_img" src="/static/85.png" mode="" v-else></image>
							<view class="list_nr_right_box_nr_text">微信</view>
						</view>
						<view class="list_nr_right_box_nr" @click="pingtai = 2">
							<image class="list_nr_right_box_nr_img" src="/static/86.png" mode="" v-if="pingtai == 2"></image>
							<image class="list_nr_right_box_nr_img" src="/static/85.png" mode="" v-else></image>
							<view class="list_nr_right_box_nr_text">支付宝</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list_nr list_nr_x">
				<view class="list_nr_left">收款码</view>
				<view class="list_nr_right">
					<view class="list_nr_right_img">
						<image class="list_nr_right_img_nr" :src="photo" mode="" v-if="photo"></image>
						<image class="list_nr_right_img_nr" src="/static/68.png" mode="" v-else @click="add_img"></image>
						<image class="list_nr_right_img_zw" src="/static/69.png" mode="" v-if="photo" @click="dal_img"></image>
					</view>
				</view>
			</view>
			<view class="list_text">
				<image class="list_text_img" src="/static/87.png" mode=""></image>
				上传收款码清晰照片。照片格式为
				<span class="span">.jpg, .jpeg, .png</span>
				，大小不超过
				<span class="span">1M</span>
				。
			</view>
		</view>

		<view class="box">
			<view class="box_top">提现金额</view>
			<view class="box_con">
				<view class="box_con_left">¥</view>
				<input class="box_con_inp" type="text" v-model="price" placeholder="请输入提现金额" />
				<view></view>
				<view class="box_con_right" @click="price = balance">全部提现</view>
			</view>
			<view class="box_btn">
				<view class="box_btn_left">
					可提现金额:
					<span class="span">{{ balance }}</span>
					元
				</view>
				<view class="box_btn_right">最少可提现{{ ktixian }}元</view>
			</view>
		</view>
		<view class="text" @click="to_withdrawal_logs">
			查看提现记录
			<image class="text_img" src="/static/28.png" mode=""></image>
		</view>

		<view class="btn">
			<view class="btn_box">
				<view class="btn_box_right" @click="submit">确认</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	const validateFields = inject('$validateFields')
	let list = ref([])
	let type = ref(1)
	let pingtai = ref(1)
	let price = ref('')
	let name = ref('')
	let yinhang = ref('')
	let zhanghao = ref('')
	let photo = ref('')

	let balance = ref('')
	let ktixian = ref('')
	const dal_img = () => {
		photo.value = ''
	}

	const add_img = () => {
		console.log('添加1')
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'],
			sourceType: ['album', 'camera'],
			success(res) {
				console.log(res.tempFiles[0].tempFilePath)
				http.upload(res.tempFiles[0].tempFilePath).then((res) => {
					console.log(res)
					photo.value = res.file_path
				})
			}
		})
	}

	const typeclick = (id) => {
		type.value = id
	}

	const submit = () => {
		let data = {
			fangshi: type.value,
			zhanghao: zhanghao.value,
			yinhang: yinhang.value,
			name: name.value,
			pingtai: pingtai.value,
			photo: photo.value,
			price: price.value
		}
		console.log('阿萨德', data)
		if (
			data.fangshi == 1 &&
			validateFields([
				{
					value: data.name,
					message: '请输入姓名'
				},
				{
					value: data.yinhang,
					message: '请输入开户名称'
				},
				{
					value: data.zhanghao,
					message: '请输入银行卡号'
				},

				{
					value: data.price,
					message: '请输入提现金额'
				},
				{
					value: data.price > ktixian.value,
					message: '不满足最小提现金额'
				}
			])
		)
			return
		if (
			data.fangshi == 2 &&
			validateFields([
				{
					value: data.name,
					message: '请输入姓名'
				},
				{
					value: data.photo,
					message: '请上传收款码'
				},

				{
					value: data.price,
					message: '请输入提现金额'
				},
				{
					value: data.price > ktixian.value,
					message: '不满足最小提现金额'
				}
			])
		)
			return

		http.post('/srapi/keyuan/txtj', data).then((res) => {
			console.log('返回值', res)
			uni.showToast({
				title: res.msg,
				icon: 'success',
				mask: true,
				duration: 500
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad(() => {
		http.post('/srapi/keyuan/wode').then((res) => {
			console.log('提现', res)
			balance.value = res.data.balance
			ktixian.value = res.data.ktixian
		})
	})

	const to_withdrawal_logs = () => {
		uni.navigateTo({
			url: '/pages_B/withdrawal_logs/withdrawal_logs'
		})
	}
</script>

<style lang="less" scoped>
	.con {
		padding: 25rpx 20rpx;
	}
	.top {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
		.top_nr {
			flex: 1;
			position: relative;
			.top_btn_nr_title {
				position: relative;
				z-index: 3;
				font-size: 28rpx;
				font-weight: 500;
				color: #787878;
				text-align: center;
			}
			.top_nr_zw {
				position: absolute;
				z-index: 1;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 76rpx;
				height: 8rpx;
				background: #ffffff;
				border-radius: 4rpx;
			}
		}
		.top_nr_xz {
			.top_btn_nr_title {
				color: #000000;
			}
			.top_nr_zw {
				background: linear-gradient(to right, #3475f3, rgba(52, 117, 243, 0));
			}
		}
	}

	.list {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 0 30rpx;
		margin-bottom: 18rpx;

		.list_nr {
			padding: 30rpx 0;
			border-bottom: 1px solid #f5f6fa;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list_nr_left {
				width: 130rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				margin-right: 56rpx;
			}
			.list_nr_right {
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				.list_nr_right_box {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.list_nr_right_box_nr {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.list_nr_right_box_nr_img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 20rpx;
						}
						.list_nr_right_box_nr_text {
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
							margin-right: 100rpx;
						}
					}
				}

				.list_nr_right_img {
					width: 162rpx;
					height: 162rpx;
					position: relative;
					.list_nr_right_img_nr {
						width: 162rpx;
						height: 162rpx;
					}
					.list_nr_right_img_zw {
						position: absolute;
						right: 0;
						bottom: 0;
						width: 66rpx;
						height: 46rpx;
					}
				}
			}
		}
		.list_nr_x {
			border-bottom: 1px solid #fff;
		}
		.list_text {
			font-size: 20rpx;
			font-weight: 400;
			color: #777777;
			padding-bottom: 35rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.list_text_img {
				width: 24rpx;
				height: 24rpx;
				margin-right: 15rpx;
			}
			.span {
				color: #fe9d2a;
				letter-spacing: -1rpx;
			}
		}
	}

	.box {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 60rpx;
		.box_top {
			font-size: 28rpx;
			font-weight: 500;
			color: #787878;
			margin-bottom: 40rpx;
		}
		.box_con {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			font-weight: 500;
			color: #000000;
			padding-bottom: 30rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #eaeaea;
			.box_con_left {
				font-size: 40rpx;
				line-height: 28rpx;
			}
			.box_con_inp {
				flex: 1;
				padding: 0 14rpx;
				font-size: 48rpx;
			}
			.box_con_right {
				font-size: 28rpx;
				line-height: 28rpx;
				color: #3475f3;
			}
		}
		.box_btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box_btn_left {
				font-size: 20rpx;
				font-weight: 500;
				color: #787878;
				.span {
					color: #fe3e18;
				}
			}
			.box_btn_right {
				font-size: 20rpx;
				font-weight: 500;
				color: #787878;
			}
		}
	}

	.text {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: 500;
		text-decoration: underline;
		color: #787878;
		.text_img {
			width: 8rpx;
			height: 14rpx;
			margin-left: 12rpx;
		}
	}

	.btn {
		margin-top: 60rpx;
		height: 115rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			background: #fff;
			padding: 15rpx 30rpx;
			padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
			.btn_box_left {
				width: 223rpx;
				height: 78rpx;
				background: #ffffff;
				border: 2rpx solid #2468fb;
				border-radius: 41rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #2468fb;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 21rpx;
				.btn_box_left_img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
			.btn_box_right {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #2468fb;
				border: 2rpx solid #2468fb;
				height: 78rpx;
				border-radius: 39rpx;
				flex: 1;
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}
		}
	}
	//
</style>
